<template>
  <!-- 项目管理区域 -->
  <div class="department_box">
    <!-- 按钮区域 -->
    <div class="department_button">
      <el-row style="margin: 20px">
        <el-button
          icon="el-icon-circle-plus-outline"
          size="medium"
          type="primary"
          @click="getEmployeeData(1)"
          :disabled="projectAddForm.type == 1 ? false : true"
          >添加项目</el-button
        >

        <!-- 添加同级项目按钮 -->
        <el-button
          icon="el-icon-circle-plus-outline"
          size="medium"
          type="primary"
          @click="getEmployeeData(2)"
          :disabled="projectAddForm.type == 1 ? true : false"
          >添加同级</el-button
        >

        <!-- 添加子级项目按钮 -->
        <el-button
          icon="el-icon-circle-plus-outline"
          size="medium"
          type="primary"
          @click="getEmployeeData(3)"
          :disabled="projectAddForm.type == 3 ? true : false"
          >添加子级</el-button
        >

        <!-- 编辑项目按钮 -->
        <el-button
          :disabled="delId == 0"
          icon="el-icon-edit"
          size="medium"
          type="primary"
          @click="changeFnBtn"
          >编辑</el-button
        >
        <!-- 编辑项目按钮 -->
        <el-button
          :disabled="delId == 0"
          icon="el-icon-edit"
          size="medium"
          type="primary"
          @click="changeFnBtnshow"
          >查看</el-button
        >

        <!-- 询问删除项目对话框 -->
        <el-popconfirm
          confirmButtonText="确定"
          cancelButtonText="取消"
          icon="el-icon-info"
          iconColor="red"
          :title="title == '' ? '你想删啥？' : title"
          @onConfirm="delDepartmentFn"
        >
          <!-- 删除项目按钮 -->
          <el-button
            slot="reference"
            icon="el-icon-circle-close"
            size="medium"
            type="danger"
            >删除</el-button
          >
        </el-popconfirm>
      </el-row>
    </div>

    <!-- 项目列表区域 -->
    <div class="department_list">
      <el-tree
        class="tree filter-tree"
        highlight-current
        node-key="id"
        :data="treeData"
        :props="defaultProps"
        icon-class="iconfont"
        @current-change="handleClick"
        style="max-width: 1700px"
      >
        <p slot-scope="{ node }" style="display: flex; align-items: center">
          <img
            :src="node.data.parentId === 0 ? headoffice : department"
            alt
            class="icon"
          />
          <el-tooltip
            class="item"
            effect="dark"
            :content="node.label"
            placement="right-start"
          >
            <span class="label" style="font-size: 14px">{{
              node.label | ellipsis
            }}</span>
          </el-tooltip>
        </p>
      </el-tree>
      <!-- 添加项目弹出框 -->
      <el-dialog
        :title="updateId == 0 ? '项目添加' : '项目编辑'"
        :visible.sync="projectAddFnDialog"
        width="30%"
        @close="cancelFn('projectAddRef')"
      >
        <el-form
          :model="projectAddForm"
          :rules="projectRules"
          ref="projectAddRef"
          :label-position="labelPosition"
        >
          <el-form-item prop="projectName" label="项目名称">
            <el-input
              placeholder="项目名称(必填"
              v-model="projectAddForm.projectName"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="projectDescribe" label="项目简介">
            <el-input
              placeholder="项目简介(必填)"
              v-model="projectAddForm.projectDescribe"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item prop="employeeId">
            <el-select
              @change="getPhone"
              v-model="projectAddForm.employeeId"
              placeholder="请选择"
              :disabled="showdisabled"
            >
              <el-option
                v-for="(item, index) in employeeList"
                :key="index"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="phone" label="项目负责人电话">
            <el-input
              disabled
              placeholder="项目负责人电话"
              v-model="projectAddForm.phone"
              autocomplete="off"
              :disabled="showdisabled"
              @change="handlerphone(projectAddForm.phone)"
            ></el-input>
          </el-form-item>
           <div v-if="showother">
               <el-form-item prop="realName"  label="项目负责人">
            <el-input
              placeholder="项目负责人"
              v-model="projectAddForm.realName"
              autocomplete="off"
              :disabled="showdisabled"
              :readonly="showotherdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="jobNo" label="员工号">
            <el-input
              placeholder="员工号"
              v-model="projectAddForm.jobNo"
              autocomplete="off"
              :disabled="showdisabled"
                 :readonly="showotherdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="roleId" label="所属角色">
                 
              <el-select v-model="projectAddForm.roleId" placeholder="所属角色"  :disabled="showselect">
                <el-option
                  v-for="(item, index) in roleData"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item prop="workingYears" label="工作年限">
            <el-input
              v-model="projectAddForm.workingYears"
              placeholder="工作年限"
              :readonly="showotherdisabled"
            />
          </el-form-item>
          <el-form-item prop="dateOfEntry" label="入职日期">
            <el-date-picker
              placeholder="入职日期"
              v-model="projectAddForm.dateOfEntry"
              type="datetime"
              :readonly="showotherdisabled"
            ></el-date-picker>
          </el-form-item>
           </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelFn('groupAddRef')">重 置</el-button>
          <el-button type="primary" @click="projectAddOk(1)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加组弹出框 -->
      <el-dialog
        :title="updateId == 0 ? '组添加' : '组编辑'"
        :visible.sync="filterNodeAddFnDialog"
        width="30%"
        @close="cancelFn('groupAddRef')"
      >
        <el-form :model="projectAddForm" :rules="groupRules" ref="groupAddRef"  :label-position="labelPosition">
          <el-form-item prop="projectName" label="组名称">
            <el-input
              placeholder="组名称(必填"
              v-model="projectAddForm.projectName"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="projectDescribe" label="组简介">
            <el-input
              placeholder="组简介(必填)"
              v-model="projectAddForm.projectDescribe"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item prop="employeeId">
            <el-select
              @change="getPhone"
              v-model="projectAddForm.employeeId"
              placeholder="请选择"
              :disabled="showdisabled"
            >
              <el-option
                v-for="(item, index) in employeeList"
                :key="index"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="phone" label="组负责人电话">
            <el-input
              disabled
              placeholder="组负责人电话"
              v-model="projectAddForm.phone"
              autocomplete="off"
              :disabled="showdisabled"
                  @change="handlerphone(projectAddForm.phone)"
            ></el-input>
          </el-form-item>
            <div v-if="showother">
               <el-form-item prop="realName" label="项目负责人">
            <el-input
              placeholder="项目负责人"
              v-model="projectAddForm.realName"
              autocomplete="off"
              :disabled="showdisabled"
              :readonly="showotherdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="jobNo" label="员工号">
            <el-input
              placeholder="员工号"
              v-model="projectAddForm.jobNo"
              autocomplete="off"
              :disabled="showdisabled"
                 :readonly="showotherdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="roleId" label="所属角色">
                 
              <el-select v-model="projectAddForm.roleId" placeholder="所属角色" :disabled="showselect">
                <el-option
                  v-for="(item, index) in roleData"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item prop="workingYears" label="工作年限">
            <el-input
              v-model="projectAddForm.workingYears"
              placeholder="工作年限"
              :readonly="showotherdisabled"
            />
          </el-form-item>
          <el-form-item prop="dateOfEntry" label="入职日期">
            <el-date-picker
              placeholder="入职日期"
              v-model="projectAddForm.dateOfEntry"
              type="datetime"
              :readonly="showotherdisabled"
            ></el-date-picker>
          </el-form-item>
           </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelFn('groupAddRef')">重 置</el-button>
          <el-button type="primary" @click="projectAddOk(2)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加门店弹出框 -->
      <el-dialog
        :title="updateId == 0 ? '门店添加' : '门店编辑'"
        :visible.sync="childAddFnDialog"
        width="30%"
        @close="cancelFn('shopAddForm')"
       
      >
        <el-form :model="projectAddForm" :rules="shopRules" ref="shopAddForm"  :label-position="labelPosition">
          <el-form-item prop="projectName" label="门店名称" >
            <el-input
              placeholder="门店名称(必填"
              v-model="projectAddForm.projectName"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="projectDescribe" label="门店简介">
            <el-input
              placeholder="门店简介(必填)"
              v-model="projectAddForm.projectDescribe"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="storeAddress" label="门店位置">
            <el-input
              v-model="projectAddForm.storeAddress"
              clearable
              placeholder="请输入门店位置"
              :disabled="showdisabled"
            >
              <el-button
                slot="append"
                icon="el-icon-location-information"
                @click="showMap"
              ></el-button>
            </el-input>
          </el-form-item>

          <el-form-item prop="detailedAddress" label="门店详细地址">
            <el-input
              placeholder="门店详细地址(必填)"
              v-model="projectAddForm.detailedAddress"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item prop="employeeId">
            <el-select
              @change="getPhone"
              v-model="projectAddForm.employeeId"
              placeholder="请选择负责人"
              :disabled="showdisabled"
            >
              <el-option
                v-for="(item, index) in employeeList"
                :key="index"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="phone" label="门店负责人电话">
            <el-input
            disabled
              placeholder="门店负责人电话"
              v-model="projectAddForm.phone"
              autocomplete="off"
              :disabled="showdisabled"
               @change="handlerphone(projectAddForm.phone)"
            ></el-input>
          </el-form-item >
             <div v-if="showother">
               <el-form-item prop="realName" label="项目负责人">
            <el-input
              placeholder="项目负责人"
              v-model="projectAddForm.realName"
              autocomplete="off"
              :disabled="showdisabled"
              :readonly="showotherdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="jobNo" label="员工号">
            <el-input
              placeholder="员工号"
              v-model="projectAddForm.jobNo"
              autocomplete="off"
              :disabled="showdisabled"
                 :readonly="showotherdisabled"
            ></el-input>
          </el-form-item>
          <el-form-item prop="roleId" label="所属角色">
                 
              <el-select v-model="projectAddForm.roleId" placeholder="所属角色"  :disabled="showselect">
                <el-option
                  v-for="(item, index) in roleData"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item prop="workingYears" label="工作年限"> 
            <el-input
              v-model="projectAddForm.workingYears"
              placeholder="工作年限"
              :readonly="showotherdisabled"
            />
          </el-form-item>
          <el-form-item prop="dateOfEntry" label="入职日期">
            <el-date-picker
              placeholder="入职日期"
              v-model="projectAddForm.dateOfEntry"
              type="datetime"
              :readonly="showotherdisabled"
            ></el-date-picker>
          </el-form-item>
           </div>
          <!-- <el-form-item>
            <el-input
              disabled
              placeholder="所属项目"
              v-model="chidrenAddress"
              autocomplete="off"
              :disabled="showdisabled"
            ></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelFn('shopAddForm')">重 置</el-button>
          <el-button type="primary" @click="projectAddOk(3)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 地图 -->
      <el-dialog :show-close="false" :visible.sync="visible" width="600px">
        <SelectMap @getMapInfo="getMaolist" v-show="visible" />
        <el-button
          type="primary"
          @click="visible = false"
          style="margin-top: 20px"
          >确 定</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>

<script>
import provinceJson from "../../utils/province.json";
import SelectMap from "../../components/SelectMap";
import {
  menuSel, // 项目菜单接口
  addProject, // 添加项目、组、门店
  distributionList2, //可分配员工
  distributionList,
  getStaffParticulars, // 员工详细信息
  menuDelete, // 项目菜单删除
  editProject, // 项目编辑
  companySel,
  roleSelNoPage,
  phoneGetUser,
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 地图的弹框
      visible: false,
      provinceList: [], // 地址数据
      department: require("../../assets/images/ly/pri1.png"),
      headoffice: require("../../assets/images/ly/pri2.png"),
      three: require("../../assets/images/ly/pri3.png"),
      treeData: [], //项目列表数据
      defaultProps: {
        // tree树配置对象
        children: "children",
        label: "name",
      },
      projectAddFnDialog: false, //添加项目
      filterNodeAddFnDialog: false, //添加同级项目dialog
      childAddFnDialog: false, //添加子级dialog
      changeFnDialog: false, //修改编辑项目dialog
      user_Id: "", // 用户id
      index: 0,
      delId: 0, // 被选中的项目、组或门店id
      // 项目校验表单
      projectRules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        employeeId: [
          { required: true, message: "请选择项目负责人", trigger: "blur" },
        ],
        projectDescribe: [
          { required: true, message: "请输入项目描述", trigger: "blur" },
          {
            min: 1,
            max: 40,
            message: "长度在 1 到 40 个字符",
            trigger: "blur",
          },
        ], //手机校验
        // principalPhone: [
        //   { required: true, message: "请输入手机号", trigger: "blur" },
        //   { pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: "手机号格式错误" }
        // ]
      },
      // 组校验表单
      groupRules: {
        projectName: [
          { required: true, message: "请输入组名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        employeeId: [
          { required: true, message: "请选择组负责人", trigger: "blur" },
        ],
        projectDescribe: [
          { required: true, message: "请输入组简介", trigger: "blur" },
          {
            min: 1,
            max: 40,
            message: "长度在 1 到 40 个字符",
            trigger: "blur",
          },
        ],
      },
      // 门店校验表单
      shopRules: {
        projectName: [
          { required: true, message: "请输入门店名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        storeAddress: [
          { required: true, message: "请选择地址", trigger: "blur" },
        ],
        detailedAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          {
            min: 1,
            max: 40,
            message: "长度在 1 到 40 个字符",
            trigger: "blur",
          },
        ],
        employeeId: [
          { required: true, message: "请选择门店负责人", trigger: "blur" },
        ],
        projectDescribe: [
          { required: true, message: "请输入门店简介", trigger: "blur" },
          {
            min: 1,
            max: 40,
            message: "长度在 1 到 40 个字符",
            trigger: "blur",
          },
        ],
      },
      dataIndex: [],
      // 添加表单
      projectAddForm: {
        type: 1, //添加类型
        projectName: "", //项目/组/门店名
        // employeeId: "", //责任人id
        userId: "", //操作人id
        storeAddress: "", //省市区地址
        detailedAddress: "", //详细地址
        projectId: "", //项目id
        groupId: "", //组id
        projectDescribe: "",
        companyId: this.org_id,
        pointX: "",
        pointY: "",
        phone: "",
        roleId: "",
        realName: "",
        jobNo: "",
        workingYears: "",
        dateOfEntry: "",
        storeAddress0: "",
        storeAddress1: "",
        storeAddress2: "",
      },
      principalPhone: "", //负责人电话
      employeeList: [], // 员工列表
      staffForm: {
        // 项目可分配负责人参数
        projectId: "",
        groupId: "",
        companyId: "",
        userId: "",
        id: "",
      },
      title: "", // 添加弹框标题
      chidrenAddress: "", // 门店所属项目所属组
      provinceProps: {
        //地址级联选择器配置对象
        label: "name",
        children: "children",
        value: "name",
      },
      provinceList: [], // 地址数据
      updateId: 0, // 编辑id
      // 编辑对象
      editProjectForm: {
        type: 1, //编辑类型
        projectName: "", //项目/组/门店名
        // employeeId: "", //责任人id
        userId: "", //操作人id
        storeAddress: "", //省市区地址
        detailedAddress: "", //详细地址
        projectId: "", //项目id
        groupId: "", //组id
        projectDescribe: "", //描述
        id: 0, //要编辑项的id
      },
      productId: "",
      group: "",
      // 公司的列表
      companySelList: [],
      showdisabled: false,
      roleData: [],
      showother: false,
      showotherdisabled: false,
      showselect: false,
      labelPosition: "top",
    };
  },
  components: {
    SelectMap,
  },
  computed: {
    ...mapState(["org_id"]),
  },
  watch: {
    org_id(val) {
      this.getData();
      this.getRolelist();
    },
  },
  // 当文字大于4的时候添加省略号
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 9) {
        return value.slice(0, 9) + "...";
      }
      return value;
    },
  },
  created() {
    this.getDataInit(); // 获取项目列表数据
    this.provinceList = provinceJson.Region; // 获取地址级联数据
    this.editProjectForm.userId = JSON.parse(sessionStorage.getItem("userId"));
    this.projectAddForm.userId = JSON.parse(sessionStorage.getItem("userId"));
    this.user_Id = JSON.parse(sessionStorage.getItem("userId"));
  },
  // 方法
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getData();
      }
    },
    // 获取项目列表初始数据
    getData() {
      this.postRequest(menuSel, { companyId: this.org_id }).then((res) => {
        if (res.code === 200) {
          let indexs = [];
          res.data.forEach((v, index) => {
            indexs.push(index);
          });
          this.dataIndex = indexs;
          // console.log(res.data);
          this.treeData = res.data; // 赋值数据列表
        }
      });
    },
    handlerphone(val) {
      const reg = /^1[3-9]\d{9}$/;
      // console.log(reg.test(value));
      if (reg.test(val)) {
      } else {
        return this.$message.error("请输入正确的手机号");
      }

      this.getRolelist();
      this.postRequest(phoneGetUser, { phone: val }).then((res) => {
        if (res.code == 200) {
          this.showother = true;

          if (
            res.data.dateOfEntry == "" ||
            res.data.jobNo == "" ||
            res.data.realName == "" ||
            res.data.roleId == 0 ||
            res.data.workingYears == ""
          ) {
            this.showotherdisabled = false;
            this.projectAddForm.roleId = "";
            this.projectAddForm.realName = "";
            this.projectAddForm.jobNo = "";
            this.projectAddForm.workingYears = "";

            this.projectAddForm.dateOfEntry = "";
          } else {
            this.projectAddForm.roleId = res.data.roleId;
            this.projectAddForm.realName = res.data.realName;
            this.projectAddForm.jobNo = res.data.jobNo;
            this.projectAddForm.workingYears = res.data.workingYears;
            this.projectAddForm.dateOfEntry = res.data.dateOfEntry;
            this.showotherdisabled = true;
            this.showselect = true;
          }
        }
      });
    },
    //获取角色
    getRolelist() {
      const params = {
        pageNumber: 1,
        pageSize: 10,
        PermissionType: 2,
        companyId: this.org_id,
      };
      this.postRequest(roleSelNoPage, params).then((res) => {
        if (res.code == 200) {
          this.roleData = res.data;
        }
      });
    },
    // 添加项目
    getEmployeeData(y) {
      // 判断是否是添加项目
      if (y == 1) {
        this.resetProvic();
        // 打开项目弹框
        this.projectAddForm.phone = "";
        this.showother = false;
        this.showdisabled = false;
        this.projectAddFnDialog = true;
        this.projectAddForm.groupId = "";
        this.projectAddForm.projectId = "";
        if (this.projectAddForm.type == 1) {
          this.staffForm.projectId = "";
          this.staffForm.groupId = "";
        }
      } else {
        // 如果选中的是项目 那调用该方法则打开组弹框
        if (this.projectAddForm.type == 1) {
          this.projectAddForm.phone = "";
          this.showother = false;
          this.showdisabled = false;

          // 判断是否选则项目
          if (this.delId != 0) {
            this.resetProvic();
            // 打开组添加弹框
            this.filterNodeAddFnDialog = true;
            // 获取项目id
            this.projectAddForm.projectId = this.delId;
            this.staffForm.groupId = "";
            this.staffForm.projectId = this.delId;

            // 改变添加类型 为组
            this.projectAddForm.type = 2;
          } else {
            this.$notify.error("请选择项目");
          }
          // 如果选中的是组
        } else if (this.projectAddForm.type == 2) {
          this.projectAddForm.phone = "";
          this.showother = false;
          this.showdisabled = false;

          // console.log(y);
          // 就通过方法传进来的值再进行判断
          // 打开同级弹框
          if (y == 2) {
            this.projectAddForm.phone = "";
            this.showother = false;
            this.showdisabled = false;

            this.resetProvic();
            this.filterNodeAddFnDialog = true;
            this.staffForm.groupId = "";
            this.staffForm.projectId = this.projectAddForm.projectId;
            this.projectAddForm.type = 2;
            // console.log(this.projectAddForm);
            // 如果y = 3 说明用户选中了组 点击了添加子级
          } else if (y == 3) {
            this.projectAddForm.phone = "";
            this.showother = false;
            this.showdisabled = false;

            this.resetShop();
            this.staffForm.projectId = "";
            this.staffForm.groupId = this.delId;
            // 打开子级弹框
            this.childAddFnDialog = true;
            // 将被选中的组id存起来
            this.projectAddForm.groupId = this.delId;

            // 改变要添加的类型为门店
            this.projectAddForm.type = 3;
            // console.log(this.projectAddForm);
          }
        } else if (this.projectAddForm.type == 3) {
          this.projectAddForm.phone = "";
          this.showother = false;
          this.showdisabled = false;
          this.resetShop();
          this.staffForm.projectId = "";

          this.staffForm.groupId = this.projectAddForm.groupId;

          this.childAddFnDialog = true;
        }
      }
      //  获取员工列表
      this.staffForm.companyId = this.org_id;
      this.staffForm.userId = window.sessionStorage.getItem("userId");
      this.postRequest(distributionList, this.staffForm).then((res) => {
        if (res.code == 200) {
          this.employeeList = res.data;
          if (this.employeeList.length == 0) {
            return this.$message.error("此项目下没有可分配的员工");
          }
        }
      });
    },
    // 获取地区信息
    getMaolist(val) {
      console.log(val);
      const pname = val.pname && val.pname !== null ? val.pname : ""; //省
      const cityname =
        val.cityname && val.cityname !== null ? val.cityname : ""; //市
      const adname = val.adname && val.adname !== null ? val.adname : ""; //区
      const address = val.address && val.address !== null ? val.address : ""; //详细地址
      const tel =
        val.tel && val.tel !== null
          ? Array.isArray(val.tel)
            ? val.tel.join(",")
            : val.tel
          : ""; //服务电话

      const Address = pname + "" + cityname + "" + adname + "" + address;
      const result = val.location.split(",");

      this.projectAddForm.pointX = result[0];
      this.projectAddForm.pointY = result[1];
      this.projectAddForm.storeAddress0 = val.pname;
      this.projectAddForm.storeAddress1 = val.cityname;
      this.projectAddForm.storeAddress2 = val.adname;
      this.projectAddForm.storeAddress =
        val.pname + "/" + val.cityname + "/" + val.adname;
      this.projectAddForm.detailedAddress = Address;
    },
    // 点击地理位置显示地图
    showMap() {
      this.visible = !this.visible;
    },
    // 获取选择员工的电话号码
    getPhone(id) {
      this.postRequest(getStaffParticulars, { id: id }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.principalPhone = res.data[0].phone;
          //  console.log(this.principalPhone);
        }
      });
    },
    // tree树选中项改变触发 的方法
    handleClick(data) {
      console.log(data);
      // 将被选中项的数据 存到编辑对象中
      this.editProjectForm.id = data.id;
      this.staffForm.id = data.id;
      this.editProjectForm.type = data.type;
      this.editProjectForm.projectName = data.name;
      this.projectAddForm.phone = data.phone;
      this.editProjectForm.userId = window.sessionStorage.getItem("userId");
      this.getRolelist();
      this.postRequest(phoneGetUser, { phone: this.projectAddForm.phone }).then(
        (res) => {
          if (res.code == 200) {
            this.showother = true;
            if (
              res.data.dateOfEntry == "" ||
              res.data.jobNo == "" ||
              res.data.realName == "" ||
              res.data.roleId == 0 ||
              res.data.workingYears == ""
            ) {
              this.showotherdisabled = false;
              this.projectAddForm.roleId = "";
              this.projectAddForm.realName = "";
              this.projectAddForm.jobNo = "";
              this.projectAddForm.workingYears = "";
              this.projectAddForm.dateOfEntry = "";
            } else {
              this.projectAddForm.roleId = res.data.roleId;
              this.projectAddForm.realName = res.data.realName;
              this.projectAddForm.jobNo = res.data.jobNo;
              this.projectAddForm.workingYears = res.data.workingYears;
              this.projectAddForm.dateOfEntry = res.data.dateOfEntry;
              this.showotherdisabled = true;
           this.projectAddForm = this.editProjectForm;

            }
          }
        }
      );
      // this.editProjectForm.employeeId = window.sessionStorage.getItem("userId");
      this.editProjectForm.projectDescribe = data.projectDescribe || "";
      this.editProjectForm.storeAddress = data.storeAddress || "";
      this.editProjectForm.detailedAddress = data.detailedAddress || "";
      this.editProjectForm.projectId = data.projectId || "";
      this.editProjectForm.groupId = data.groupId || "";
      this.staffForm.groupId = "";
      this.staffForm.projectId = "";
      // 清空修改id
      this.updateId = 0;
      // 判断要添加的是组还是门店
      // console.log(data);
      // 判断是否 点击编辑按钮
      // 如果选中组
      if (data.type == 2) {
        // 将被选中项的数据 存到编辑对象中
        this.editProjectForm.id = data.id;
        this.editProjectForm.type = data.type;
        this.editProjectForm.projectName = data.name;
        this.editProjectForm.userId = window.sessionStorage.getItem("userId");
        this.projectAddForm.phone = data.phone;
        this.editProjectForm.projectDescribe = data.groupDescribe || "";
        this.editProjectForm.storeAddress = data.storeAddress || "";
        this.editProjectForm.detailedAddress = data.detailedAddress || "";
        this.editProjectForm.projectId = data.projectId || "";
        this.editProjectForm.groupId = data.groupId || "";
        // 清空组id
        this.projectAddForm.groupId = "";
        // 将被选中组的父级id存起来
        this.projectAddForm.projectId = data.projectId;
        // 将项目名与组名 拼接起来
        this.chidrenAddress = data.projectName + "/" + data.name;
        this.staffForm.projectId = data.projectId;
        // this.staffForm.groupId = data.id;
        this.staffForm.groupId = "";
      }
      // 如果选中门店
      if (data.type == 3) {
        // 将被选中项的数据 存到编辑对象中
        this.editProjectForm.id = data.id;
        this.editProjectForm.type = data.type;
        this.editProjectForm.projectName = data.name;
        this.editProjectForm.userId = window.sessionStorage.getItem("userId");
        this.projectAddForm.phone = data.phone;
        this.editProjectForm.projectDescribe = data.storeDescribe || "";
        this.editProjectForm.storeAddress = data.storeAddress || "";
        this.editProjectForm.detailedAddress = data.detailedAddress || "";
        this.editProjectForm.projectId = data.projectId || "";
        this.editProjectForm.groupId = data.groupId || "";

        this.editProjectForm.pointX = data.pointX;
        this.editProjectForm.pointY = data.pointY;
        this.editProjectForm.storeAddress0 = data.storeAddress0;
        this.editProjectForm.storeAddress1 = data.storeAddress1;
        this.editProjectForm.storeAddress2 = data.storeAddress2;

        // console.log(data);
        // 判断是否 点击编辑按纽
        // 如果选中组
        // console.log(data);
        this.projectAddForm.projectId = "";
        // 将被选中门店的父级id存起来
        this.projectAddForm.groupId = data.groupId;
        // 将项目名与组名 拼接起来
        this.chidrenAddress = data.projectName + "/" + data.groupName;
        // this.staffForm.projectId = data.projectId;
        this.staffForm.projectId = "";
        this.staffForm.groupId = data.groupId;
      }

      // 判断被选中的类型
      this.projectAddForm.type = data.type;
      this.index = data.type - 1;
      // 获取选中项的id
      this.delId = data.id;
      // console.log(this.index,this.delId);
      if (data.type == 1) {
        this.title = "确定删除该项目吗？";
      } else if (data.type == 2) {
        this.title = "确定删除该组吗？";
      } else {
        this.title = "确定删除该门店吗？";
      }
      // console.log(this.chidrenAddress);
    },
    // 确认添加
    projectAddOk(num) {
      // console.log(num);
      // 判断是项目、组还是门店调用了添加方法
      if (num == 1) {
        this.$refs.projectAddRef.validate((valid) => {
          if (!valid) return false;
          // console.log(valid);
          this.postADD();
        });
        return;
      }
      if (num == 2) {
        this.$refs.groupAddRef.validate((valid) => {
          if (!valid) return false;
          this.postADD();
        });
        return;
      }
      if (num == 3) {
        this.$refs.shopAddForm.validate((valid) => {
          if (!valid) return false;
          this.postADD();
        });
        return;
      }
    },
    // 添加数据
    postADD() {
      if (this.projectAddForm.type == 3) {
        // 调用门店添加接口之前 先将门店地址转换一下
      }
      // 判断是添加还是编辑
      if (this.updateId != 0) {
        this.projectAddForm.companyId = this.org_id;
        this.projectAddForm.userId = window.sessionStorage.getItem("userId");

        this.postRequest(editProject, this.projectAddForm).then((res) => {
          if (res.code == 200) {
            this.$notify.success(res.msg);
            this.getData();
            this.projectAddFnDialog = false;
            this.filterNodeAddFnDialog = false;
            this.childAddFnDialog = false;
            this.principalPhone = "";
            this.chidrenAddress = "";
            this.updateId = 0;
          }
        });
      } else {
        //  添加
        this.projectAddForm.companyId = this.org_id;
        this.projectAddForm.userId = window.sessionStorage.getItem("userId");
        this.postRequest(addProject, this.projectAddForm).then((res) => {
          if (res.code == 200) {
            this.$notify.success(res.msg);
            this.getData();
            this.projectAddFnDialog = false;
            this.filterNodeAddFnDialog = false;
            this.childAddFnDialog = false;
            this.principalPhone = "";
            this.chidrenAddress = "";
          }
        });
      }
    },
    // 重置
    cancelFn(formName) {
      this.$refs[formName].resetFields();
      this.principalPhone = "";
      this.projectAddForm.type = "";
      this.projectAddForm.projectName = "";
      this.projectAddForm.userId = "";
      this.projectAddForm.storeAddress = "";
      this.projectAddForm.detailedAddress = "";
      this.projectAddForm.projectId = "";
      this.projectAddForm.groupId = "";
      this.projectAddForm.projectDescribe = "";
      this.projectAddForm.companyId = "";
      this.projectAddForm.pointX = "";
      this.projectAddForm.pointY = "";
      this.projectAddForm.phone = "";
      this.projectAddForm.roleId = "";
      this.projectAddForm.realName = "";
      this.projectAddForm.jobNo = "";
      this.projectAddForm.workingYears = "";
      this.projectAddForm.dateOfEntry = "";
      this.projectAddForm.storeAddress0 = "";
      this.projectAddForm.storeAddress1 = "";
      this.projectAddForm.storeAddress2 = "";
      this.$message.success(
        "添加子级或者同级要重新选择要添加的项目 或者 组 或者门店哟!!!"
      );
    },
    // 清空项目 组form框
    resetProvic() {
      this.updateId = 0;
      this.projectAddForm.projectName = "";
      // this.projectAddForm.employeeId = "";
      this.projectAddForm.projectDescribe = "";
      this.principalPhone = "";
    },
    // 清空门店form框
    resetShop() {
      this.updateId = 0;
      this.projectAddForm.projectName = "";
      // this.projectAddForm.employeeId = "";
      this.projectAddForm.projectDescribe = "";
      this.projectAddForm.detailedAddress = "";
      this.projectAddForm.storeAddress = "";
      this.principalPhone = "";
    },
    // 删除
    delDepartmentFn() {
      if (this.delId == 0) {
        this.$notify.error("请选择要删除的项目、组或者门店");
      } else {
        // console.log(this.user_Id,this.index,this.delId);
        this.postRequest(menuDelete, {
          user_Id: this.user_Id,
          index: this.index,
          id: this.delId,
        }).then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.$notify.success(res.msg);
            this.getData();
          }
        });
      }
    },
    // 编辑按钮 回显
    async changeFnBtn() {
      this.showotherdisabled = true;
      this.showdisabled = false;
      this.showselect = true;
      if (this.delId == 0) {
        this.$notify.error("请选择要编辑的项目、组或门店");
        return;
      }
      this.staffForm.companyId = this.org_id;
      this.staffForm.userId = window.sessionStorage.getItem("userId");
      //  获取员工列表
      // await this.postRequest(distributionList2, this.staffForm).then((res) => {
      //   if (res.code == 200) {
      //     this.employeeList = res.data;
      //     if (res.data.length == 0) {
      //       this.editProjectForm.employeeId = "暂无负责人";
      //     }
      //   }
      // });
      if (this.projectAddForm.type == 1) {
        this.projectAddFnDialog = true;
      } else if (this.projectAddForm.type == 2) {
        this.filterNodeAddFnDialog = true;
      } else if (this.projectAddForm.type == 3) {
        this.childAddFnDialog = true;
      }
      // 获取要编辑的项目 组 门店 的id
      this.updateId = await this.delId;
      // 级联列表绑定的是一个数组 而我们得到的地址数据是字符串 需要转换一下 才能回显
      // this.projectAddForm = this.editProjectForm;
      this.projectAddForm.storeAddress =
        this.editProjectForm.storeAddress == "" ||
        this.editProjectForm.storeAddress == null
          ? []
          : this.editProjectForm.storeAddress.split("/");
    },
    async changeFnBtnshow() {
      this.showdisabled = true;
      this.showselect = true;
      if (this.delId == 0) {
        this.$notify.error("请选择要查看的项目、组或门店");
        return;
      }
      this.staffForm.companyId = this.org_id;
      this.staffForm.userId = window.sessionStorage.getItem("userId");
      //  获取员工列表
      // await this.postRequest(distributionList2, this.staffForm).then((res) => {
      //   if (res.code == 200) {
      //     this.employeeList = res.data;
      //     if (res.data.length == 0) {
      //       this.editProjectForm.employeeId = "暂无负责人";
      //     }
      //   }
      // });
      if (this.projectAddForm.type == 1) {
        this.projectAddFnDialog = true;
      } else if (this.projectAddForm.type == 2) {
        this.filterNodeAddFnDialog = true;
      } else if (this.projectAddForm.type == 3) {
        this.childAddFnDialog = true;
      }
      // 获取要编辑的项目 组 门店 的id
      this.updateId = await this.delId;
      // 级联列表绑定的是一个数组 而我们得到的地址数据是字符串 需要转换一下 才能回显
      this.projectAddForm = this.editProjectForm;

      this.projectAddForm.storeAddress =
        this.editProjectForm.storeAddress == "" ||
        this.editProjectForm.storeAddress == null
          ? []
          : this.editProjectForm.storeAddress.split("/");
    },
    // 获取公司的无分页列表
    // getcompanySel() {
    //   this.postRequest(companySel).then(res => {
    //     if (res.code == 200) {
    //       this.companySelList = res.data;
    //     }
    //   });
    // },
    // 拿到公司的id
    // handlercompanyId(val) {
    //   this.ruleForm.companyId = val;
    // }
  },
};
</script>

<style scoped>
.department_box {
  max-width: 1600px;
}
/* 按钮 */
.department_button el-button el-popconfirm {
  margin-right: 30px;
}
.filter-tree {
  display: flex !important;
  width: max-content;
  min-width: 120px;
  flex-wrap: wrap;
}
@media screen and (max-width: 1366px) {
  .el-tree {
    width: 1181px;
  }
}
/* 树状控件 */
.el-tree {
  margin-top: 20px;
  padding: 30px 30px 30px 30px;
}
.icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.tree-operation {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.tree-container /deep/ .el-dialog__body {
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}

.demo-ruleForm /deep/ .el-form-item {
  margin-bottom: 0;
}

/* 树形结构节点添加连线 */
.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
  margin-right: 10px;
}

.tree-container /deep/ .el-tree > .el-tree-node {
  padding-left: 0 !important;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none !important;
}

.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree >>> .el-tree-node__content {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px !important;
  padding-right: 20px !important;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(226, 226, 226, 1);
  border-radius: 4px;
  margin-bottom: 20px;
  margin-right: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  width: 220px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  position: absolute;
  left: -4px;
  right: auto;
  bottom: 0;
  top: 0;
  border-width: 1px;
  border-left: 1px dashed #e2e2e2;
  height: 100%;
  width: 1px;
}

.tree-container /deep/ .tree > .el-tree-node:before {
  border: none;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
  border-top: 1px dashed #e2e2e2;
  height: 30px;
  top: 18px;
  width: 20px;
}

.tree /deep/ .el-tree-node__expand-icon.is-leaf {
  display: none;
}

/*自定义展开收缩图标*/
.tree /deep/ .icon111111111:before {
  content: "\e600";
}

.tree /deep/ .el-tree-node__expand-icon.expanded:before {
  content: "\e643";
}

.tree /deep/ .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}

.tree /deep/ .el-tree-node__expand-icon {
  font-size: 18px;
  color: #409eff;
}

.label {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 22px;
  color: rgba(62, 63, 66, 1);
}
</style>
